<template>
  <div class="tabs">
    <van-tabs v-model="tabsIndex" @click="tabsTap" @change="onChange">
      <van-tab :title="item.value" v-for="(item,index) in tabs" :key="index">
        <slot name="content"></slot>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  props: ['tabs'],
  data() {
    return {
      tabsIndex: 0
    }
  },
  methods: {
    tabsTap() {
      // console.log(this.tabsIndex)
      // 传index出去让页面响应
      this.$emit('tabsItemChange', this.tabsIndex)
    },
    onChange(tabsIndex) {
      console.log(tabsIndex)
      // this.$store.state.tabsIndex = tabsIndex
    }
  },
  created() {
    this.tabsIndex = this.$store.state.tabsIndex
  }
}
</script>
<style lang='less' scoped>
.tabs_title {
  display: flex;
  .title_item {
    background-color: #fff;
    padding: 15rpx 0;
    flex: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-bottom: 3rpx solid #ccc;
  }
  .active {
    color: var(--themeColor);
    border-bottom: 5rpx solid currentColor !important;
  }
  .tabs_content {
    /* border-top: 5rpx solid #eb4450; */
    width: 100%;
  }
}
</style>
